<template>
  <div :class="cardClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const cardClasses = computed(() => {
  return cn(
    'rounded-lg border bg-card text-card-foreground shadow-sm',
    props.class
  )
})
</script>

<script lang="ts">
export default {
  name: 'Card'
}
</script>
</template>

<template>
  <div :class="headerClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/utils/cn'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const headerClasses = computed(() => {
  return cn('flex flex-col space-y-1.5 p-6', props.class)
})
</script>

<script lang="ts">
export default {
  name: 'CardHeader'
}
</script>
</template>

<template>
  <h3 :class="titleClasses">
    <slot />
  </h3>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/utils/cn'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const titleClasses = computed(() => {
  return cn('text-2xl font-semibold leading-none tracking-tight', props.class)
})
</script>

<script lang="ts">
export default {
  name: 'CardTitle'
}
</script>
</template>

<template>
  <p :class="descriptionClasses">
    <slot />
  </p>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/utils/cn'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const descriptionClasses = computed(() => {
  return cn('text-sm text-muted-foreground', props.class)
})
</script>

<script lang="ts">
export default {
  name: 'CardDescription'
}
</script>
</template>

<template>
  <div :class="contentClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/utils/cn'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const contentClasses = computed(() => {
  return cn('p-6 pt-0', props.class)
})
</script>

<script lang="ts">
export default {
  name: 'CardContent'
}
</script>
</template>

<template>
  <div :class="footerClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/utils/cn'

interface Props {
  class?: string
}

const props = withDefaults(defineProps<Props>(), {})

const footerClasses = computed(() => {
  return cn('flex items-center p-6 pt-0', props.class)
})
</script>

<script lang="ts">
export default {
  name: 'CardFooter'
}
</script>